<template>
  <div id="users">
    <van-nav-bar title="用户列表" >
      <template #left>
        <van-icon name="search" size="25"  color="white"/>
      </template>
       <template #right>
           <router-link  tag="span" to="/userAdd">
               <van-icon name="plus" size="25"  color="white"/>
               添加
           </router-link>
      </template>
    </van-nav-bar>

    <!-- 用户列表 -->
    <user-list :users="users"></user-list>

    <!-- 标签栏 -->
      <tab-btn></tab-btn>
  </div>
</template>

<script>
import axios from "axios";
import tabBtn from "../components/tabBtn";
import userList from "../components/userList";
export default {
  components: {
    tabBtn,
    userList
  },
  data() {
      return {
          users:[]
      }
  },
  created() {
      axios.get('/api/user/index')
      .then(res=>{
        //   console.log(res);
        this.users=res.data.data
      })
      
    // 使用mock模拟数据
      // var url = '/mock/test';
      // axios.get(url)
      //   .then(res => {
      //     console.log(res);
      //   })
      //   .catch(error => {
      //     console.log(error);
      //   })
  },
};
</script>
<style lang="less" scoped>
@dataColor:#2196f3b8;
@fontColor:white;
   /deep/ .van-nav-bar__content{
       background: @dataColor;
       color: @fontColor;
   }
   /deep/ .van-nav-bar__title {
       color:@fontColor;
   }
   /deep/ .van-button--warning{
         background-color:@dataColor;
         border:1px solid @dataColor;
   }
</style>